<template>
    <view class="page">
        <!-- 左侧分类 -->
        <view class="sidebar">
            <view class="category-item" :class="{ active: activeCategory === index }"
                v-for="(category, index) in categories" :key="index" @tap="changeCategory(index)">
                {{ category.name }}
            </view>
        </view>

        <!-- 右侧标签列表 -->
        <view class="content">
            <!-- 标签列表 -->
            <view class="tags">
                <view class="tag" :class="{ selected: selectedTags.includes(tag) }"
                    v-for="(tag, index) in categories[activeCategory].tags" :key="index" @tap="toggleTag(tag)">
                    {{ tag }}
                </view>
            </view>

            <!-- 已添加标签 -->
            <view class="selected-section">
                <view class="selected-title">已添加标签</view>
                <view class="selected-tags">
                    <view class="tag deleteable" v-for="(tag, index) in selectedTags" :key="index"
                        @tap="removeTag(tag)">
                        {{ tag }} ✖
                    </view>
                </view>
            </view>

            <!-- 保存按钮 -->
            <button class="save-button" @tap="saveTags">保存</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeCategory: 0, // 当前选中的分类索引
                categories: [
                    { name: "性格",tags: ["御姐风范","型男风范","文艺青年"] },
                    { name: "价值观",tags: ["甜美可爱","温暖阳光","有才华"] },
                    { name: "旅行",tags: ["性格超好","消息秒回复","自信满满"] },
                    { name: "美食",tags: ["比较佛系","亲和力强","好奇心旺盛"] },
                    { name: "宠物",tags: ["积极乐观","言出必行","纯真美好"] },
                ],
                selectedTags: ["御姐风范","甜美可爱"], // 默认选中的标签
            };
        },
        methods: {
            // 切换分类
            changeCategory(index) {
                this.activeCategory = index;
            },
            // 选择或取消选择标签
            toggleTag(tag) {
                const index = this.selectedTags.indexOf(tag);
                if (index > -1) {
                    // 如果标签已被选中，则取消选中
                    this.selectedTags.splice(index,1);
                } else {
                    // 限制最多选择 5 个标签
                    if (this.selectedTags.length < 5) {
                        this.selectedTags.push(tag);
                    } else {
                        uni.showToast({
                            title: "最多选择5个标签",
                            icon: "none",
                        });
                    }
                }
            },
            // 删除标签
            removeTag(tag) {
                const index = this.selectedTags.indexOf(tag);
                if (index > -1) {
                    this.selectedTags.splice(index,1);
                }
            },
            // 保存标签
            saveTags() {
                uni.showToast({
                    title: "标签已保存",
                    icon: "success",
                });
                console.log("已保存标签：",this.selectedTags);
            },
        },
    };
</script>

<style lang="scss">
    .page {
        display: flex;
        height: 100vh;
    }

    .sidebar {
        width: 200rpx;
        background-color: #f5f5f5;
        padding: 20rpx 0;
        box-shadow: 2rpx 0 8rpx rgba(0, 0, 0, 0.1);
    }

    .category-item {
        padding: 20rpx;
        text-align: center;
        font-size: 26rpx;
        color: #333;
        cursor: pointer;
    }

    .category-item.active {
        background-color: #3c9cff;
        color: #fff;
    }

    .content {
        flex: 1;
        padding: 20rpx;
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        margin-bottom: 30rpx;
    }

    .tag {
        padding: 10rpx 20rpx;
        border: 1px solid #ccc;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #333;
        background-color: #fff;
        cursor: pointer;
    }

    .tag.selected {
        color: #fff;
        background-color: #3c9cff;
        border-color: #3c9cff;
    }

    .selected-section {
        margin-top: 20rpx;
    }

    .selected-title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
    }

    .selected-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
    }

    .tag.deleteable {
        position: relative;
        padding: 10rpx 20rpx;
        border: 1px solid #ff4d4f;
        border-radius: 20rpx;
        background-color: #ffecec;
        color: #ff4d4f;
    }

    .tag.deleteable:hover {
        background-color: #ff4d4f;
        color: #fff;
    }

    .save-button {
        width: 100%;
        height: 60rpx;
        background-color: $uni-btn-color;
        color: #fff;
        font-size: 28rpx;
        border: none;
        border-radius: 30rpx;
        text-align: center;
        margin-top: 30rpx;
    }
</style>